<template>
  <n-layout-content content-style="padding: 0px;margin: 0px;">
    <n-space justify="end" style="background: rgba(38, 38, 42, 1)">
      <n-button-group>
        <!-- <n-button color="#2c3e50" type="primary">搜索</n-button> -->
        <n-input
          color="#2c3e50"
          style="width: 300px"
          placeholder="输入搜索内容"
          v-model:value="like"
        />
        <n-button type="primary" ghost style="margin-right: 5px">搜索</n-button>
      </n-button-group>
    </n-space>
    <n-data-table
      :columns="columns"
      :data="tebleList"
      :row-key="(row) => row.id"
      :style="{ height: `${innerHeight - 120}px` }"
      flex-height
      @update:checked-row-keys="handleCheck"
    />
    <VGFooter />
  </n-layout-content>
</template>

<script>
import VGFooter from "../components/VGFooter.vue";
import IPC from "../background/ipc";
import useTableRepositories from "../composables/useTableRepositories";
import useWindowSize from "../composables/useWindowSize";
import { h, ref, watch, computed } from "vue";
import { NButton } from "naive-ui";
import { useStore } from "vuex";
//import Constants from "../contants";

const createColumns = () => {
  return [
    {
      type: "selection",
    },
    {
      title: "表名",
      key: "tableName",
    },
    {
      title: "引擎",
      key: "engine",
    },
    {
      title: "字符集",
      key: "tableCollation",
    },
    {
      title: "说明",
      key: "tableComment",
    },
    {
      title: "版本",
      key: "version",
    },
    {
      title: "创建时间",
      key: "createTime",
    },
    {
      title: "Action",
      key: "actions",
      render(row) {
        return [
          h(
            NButton,
            {
              size: "small",
              sytle: { marginRight: `5px` },
              onClick: () => {
                IPC.invoke("window.create", {
                  options: {
                    title: `表【${row.tableName}】的字段`,
                    width: 800,
                    height: 800,
                    route: `/columns?linkId=${row.linkId}&tableId=${row.id}`,
                  },
                }).then((result) => {
                  console.log(result);
                });
              },
            },
            { default: () => "字段" }
          ),
          h(
            NButton,
            {
              size: "small",
              sytle: { marginRight: `5px` },
              onClick: () => {
                IPC.invoke("window.create", {
                  options: {
                    title: `表【${row.tableName}】预览`,
                    width: 800,
                    height: 800,
                    route: `/preview?linkId=${row.linkId}&tableId=${row.id}`,
                  },
                }).then((result) => {
                  console.log(result);
                });
              },
            },
            { default: () => "预览" }
          ),
        ];
      },
    },
  ];
};

export default {
  name: "VGContent",
  components: {
    VGFooter,
  },

  props: {},

  setup() {
    const checkedRowKeysRef = ref([]);

    const like = ref("");
    //const height = ref(200);

    const store = useStore();

    const current = computed(() => store.state.current);

    const setIds = (ids) => store.commit("tables/setIds", ids);

    const { tebleList, getTableList } = useTableRepositories(like);

    const { innerHeight } = useWindowSize();

    watch(store.state.current, () => {
      getTableList(current.value.id);
    });

    watch(like, () => {
      getTableList(current.value.id);
    });

    // onMounted(() => {
    //   height.value = Constants.calcNoBarHeight();
    //   window.onresize = () => {
    //     return (() => {
    //       height.value = Constants.calcNoBarHeight();
    //     })();
    //   };
    // });

    return {
      like,
      innerHeight,
      tebleList,
      columns: createColumns(),
      checkedRowKeys: checkedRowKeysRef,
      handleCheck(rowKeys) {
        checkedRowKeysRef.value = rowKeys;
        console.log(rowKeys);
        setIds(checkedRowKeysRef.value);
      },
    };
  },

  methods: {
    getRowKey(row) {
      console.log(row);
      return row.id;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.vgcontent {
  background: --color;
  width: 100%;
  height: 100%;
}
</style>
